import { OrderDiyList, OrderPayDiy } from '@/api/expert';
import { GetUserInfo } from '@/api/user';
import Empty from '@/components/Empty';
import StatusIconPrimary from '@/components/StatusIconPrimary';
import { Skeleton } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';

export default function Page() {
  const { data: list, loading, refresh } = useRequest(OrderDiyList);
  const { data: user } = useRequest(GetUserInfo, {
    cacheKey: 'get:user:info',
  });

  const { runAsync } = useRequest(OrderPayDiy, { manual: true });

  if (loading)
    return (
      <View className=' pt-4'>
        <Skeleton title={true} row='3' />
      </View>
    );
  return (
    <>
      {Boolean(!list?.length) && (
        <View className='pt-20'>
          <Empty
            icon={
              <Image
                src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/empty-1.png'
                className=' w-[381px] h-[311px] block -mb-[50px]'
              />
            }
            title='暂无历史定制'
          />
        </View>
      )}

      {list?.map((item) => (
        <View
          key={item.id}
          className=' mx-4 mt-4'
          onClick={async () => {
            //待审核的时候
            if (item.status === 0)
              return Taro.showModal({
                title: '系统提示',
                content: '预约确认中，确认后可查看详情',
                showCancel: false,
              });

            //待支付的时候
            if (item.status === 1) {
              //帮豆不足
              if ((user?.beans || 0) < item.beans) {
                const { confirm } = await Taro.showModal({
                  title: '提示',
                  content: '帮豆不足，是否充值？',
                });
                if (!confirm) return;
                Taro.navigateTo({ url: `/pages/my/bangdou/index` });
                return;
              }

              const { confirm } = await Taro.showModal({
                title: '提示',
                content: `是否支付「${item.beans}」帮豆 ?`,
              });

              if (!confirm) return;
              await runAsync({ id: item.id });
              refresh();
              Taro.showToast({ title: '支付成功' });
            }
          }}
        >
          <View className='px-5 py-3 bg-white rounded-lg relative'>
            <View className=' text-[36px] font-bold text-black flex items-start justify-between'>
              <Text className='mr-2'>{item.expert_name}</Text>
              {/* 支付tag */}
              {item.status === 1 && (
                <View
                  className='h-[36px] leading-[36px] text-xs text-white pl-2 pr-2 inline-block mt-[8px]'
                  style={{
                    backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/custom-1.png?v=1.0.0)`,
                    backgroundSize: '100% 100%',
                  }}
                >
                  ·支付{item.beans}帮豆
                </View>
              )}
            </View>
            <Text className=' block text-xs text-gary4 mt-1'>
              我的需求：{item.remark}
            </Text>
          </View>
          <View className=' bg-[#F9FBFC] px-5 py-3 flex items-center justify-between rounded-lg'>
            <StatusIconPrimary />
            {item.status === 0 && (
              <Text className='text-xs text-warn'>待审核</Text>
            )}
            {item.status === 1 && (
              <Text className='text-xs text-primary'>待支付</Text>
            )}
            {item.status === 2 && (
              <Text className='text-xs text-danger'>审核驳回</Text>
            )}
            {item.status === 3 && (
              <Text className='text-xs text-success'>已支付</Text>
            )}
            {item.status === 4 && (
              <Text className='text-xs  text-primary'>已完成</Text>
            )}
            {item.status === 5 && (
              <Text className='text-xs text-gary4'>定制失败</Text>
            )}
          </View>
        </View>
      ))}
    </>
  );
}
